<template>
	<view class="CommentDetails">
		<view class="CommentDetailsBox">
			<view class="userInfo">
				<view class="userImage">
					<image src="" mode=""></image>
				</view>
				<view class="userInfo_R">
					<view class="userNameBox">
						<view class="userName">翠花探店</view>
						<view class="Grade">lv6</view>
					</view>
					<view class="timeBpx">
						<view class="Commenttime">2021/01/01</view>
						<view class="price">￥65/人</view>
					</view>
				</view>
			</view>
			<view class="CommentCont">
				被种草了好久的肉肉店——库克石烧牛排
				听闻兴盛路店常年都是排队的状态，打卡的琥珀店属于新店，排位状况稍微好点，但周五下班过来也是等到差不多8点才入席仓
				点了个套餐，招牌库克石烧安格斯牛排肯定要选啦，还选了炙烧牛肋条、风味烤口蘑、松茸鸡丝汤，甜品选了焦糖布丁和黄石烧安格斯牛小排，稍薄一些，口感更加细腻柔软竟然有入口即化的感觉的，只想再"安可"一份眇建议直接或者蘸些许研磨的玫瑰盐吃哦，更能吃到原汁原味
				烟熏三文鱼鲜果沙拉，清爽十足，吃完感觉又变成一个元气满满的夏日少女了潦
				烤南瓜配低脂酸奶，南瓜是我百吃不厌的美
			</view>
			<view class="recommendBox">
				<view class="recommendtitle">推荐菜：</view>
				<view class="recommendList">
					<view class="recommendItem" v-for="(item,index) in 5" :key="index">#霸王五花肉</view>
				</view>
			</view>
			<view class="ImageBox">
				<view class="ImageItem" v-for="(item,index) in 5" :key="index">
					<image src="" mode=""></image>
				</view>
			</view>
			<view class="WorkingMealBox">
				<view class="WorkingImage">
					<image src="" mode=""></image>
				</view>
				<view class="Working_R">
					<view class="WorkingName">工作日单人午餐</view>
					<view class="Working_price">￥65</view>
				</view>
			</view>
			<view class="businessBox">
				<view class="businessImage">
					<image src="../../static/index/index_content.png" mode=""></image>
				</view>
				<view class="business_R">
					<view class="businessNameBox">
						<view class="businessName">创TheChok概念西餐吧(雄峰店)</view>
						<view class="businessGive">
							<u-icon name="star" color="#8B8B8B"></u-icon>
							<view class="businessGiveNum">123</view>
						</view>
					</view>
					<view class="businesStype">西餐</view>
					<view class="addressBox">
						<view class="address">钟村街道雄峰城b3座0000-0000</view>
						<view class="addressNum">2.5km</view>
					</view>
				</view>
			</view>
			<view class="giveBox_B">
				<view></view>
				<view class="give_R">
					<view class="commentBox">
						<view class="commentIcon">
							<image src="/static/mine/comment.png" mode=""></image>
						</view>
						<view class="commentNum">111</view>
					</view>
					<view class="giveBox">
						<u-icon name="thumb-up" color="#707070" size="30"></u-icon>
						<view class="giveNum">123</view>
					</view>
				</view>
			</view>
			<view class="evaluateBox">
				<view class="evaluatItem" v-for="(item,index) in 5" :key="index">
					<view class="evaluateImage">
						<image src="" mode=""></image>
					</view>
					<view class="evaluate_R">
						<view class="evaluateName">商家回应</view>
						<view class="evaluateCont">非常感谢亲亲对小店的夸赞和推荐，乐在分享，抒写能力为生活增添一份乐趣.对于喜欢的东西我们都有无穷的表达和无数动人的表达，只因为喜欢。非常感谢您满意的分享，让快乐得到传播。</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
.CommentDetails{
	background-color: #f5f5f5;
	// padding-top: 150upx;
	.CommentDetailsBox{
		padding: 32upx 24upx;
		// margin-top: 200upx;
		background-color: #FFFFFF;
		.userInfo{
			display: flex;
			align-items: center;
			.userImage{
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
				background-color: #F0AD4E;
				margin-right: 16upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.userInfo_R{
				width: calc(100% - 88upx);
				.userNameBox{
					display: flex;
					align-items: center;
					.userName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					.Grade{
						width: 44upx;
						height: 24upx;
						background: #FF5555;
						opacity: 1;
						border-radius: 12upx;
						margin-left: 8upx;
						text-align: center;
						line-height: 24upx;
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
				.timeBpx{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16upx;
					.Commenttime{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D0D0D0;
					}
					.price{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
		.CommentCont{
			font-size: 20upx;
			color: #333333;
			line-height: 34upx;
			padding: 24upx 0;
		}
		.recommendBox{
			display: flex;
			// align-items: center;
			margin-bottom: 24upx;
			.recommendtitle{
				width: 80upx;
				font-size: 20upx;
				color: #D0D0D0;
			}
			.recommendList{
				width: calc(100% - 80upx);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.recommendItem{
					color: #409EFF;
					font-size: 20upx;
				}
			}
		}
		.ImageBox{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 32upx;
			.ImageItem{
				width: 176upx;
				height: 176upx;
				border-radius: 8upx;
				margin-right: 16upx;
				margin-bottom: 16upx;
				background-color: #F0AD4E;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.WorkingMealBox{
			display: flex;
			align-items: center;
			width: 702upx;
			height: 80upx;
			background: #F7F7F7;
			opacity: 1;
			border-radius: 8upx;
			padding: 16upx;
			.WorkingImage{
				width: 48upx;
				height: 48upx;
				margin-right: 16upx;
				background-color: #F0AD4E;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.Working_R{
				width: calc(100% - 64upx);
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.WorkingName{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.Working_price{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFAC3F;
					// margin-top: 16upx;
				}
			}
		}
		.businessBox{
			display: flex;
			width: 702upx;
			background: #FFFFFF;
			box-shadow: 0 0 12upx rgba(0, 0, 0, 0.1);
			opacity: 1;
			border-radius: 8upx;
			padding: 24upx 16upx;
			margin: 32upx auto;
			.businessImage{
				width: 96upx;
				height: 96upx;
				border-radius: 8upx;
				margin-right: 16upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.business_R{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: calc(702upx - 144upx);
				.businessNameBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.businessName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}
					.businessGive{
						display: flex;
						align-items: center;
						.businessGiveNum{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 8upx;
						}
					}
				}
				.businesStype{
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
				.addressBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.giveBox_B{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16upx 0 24upx 0;
			border-bottom: 2upx solid #F5F5F5;
			.give_R{
				display: flex;
				align-items: center;
				.commentBox{
					display: flex;
					align-items: center;
					margin-right: 48upx;
					.commentIcon{
						width: 32upx;
						height: 32upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.commentNum{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						margin-left: 10upx;
					}
				}
				.giveBox{
					display: flex;
					align-items: center;
					.giveNum{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						margin-left: 10upx;
					}
				}
			}
		}
		.evaluateBox{
			.evaluatItem{
				display: flex;
				padding: 32upx 0;
				border-bottom: 2upx solid #F5F5F5;
				.evaluateImage{
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 16upx;
					background-color: #F0AD4E;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.evaluate_R{
					width: calc(100% - 64upx);
					.evaluateName{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
					.evaluateCont{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 30upx;
						color: #333333;
						margin-top: 16upx;
					}
				}
			}
		}
	}
}
</style>
